<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">


<head th:replace="~{/admin/_fragments:: head(~{::title})}">

    <!--<head>-->
    <title> todolist</title>

</head>


<body>
<nav th:replace="~{admin/_fragments :: menu(2)}"  class="ui   attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container"  >
        <div class="ui   secondary stackable menu">
            <a href="#" th:href="@{/admin/blogs}">
                <h3 class="ui  teal header item" ><i class="ui clipboard outline icon"></i>博客管理</h3></a>
            <a class="m-item m-mobile-hidden  item"  th:classapend = "${(n == 1) ? 'active' : ''}" th:href="@{/admin/blogs/input}"> <i class="ui  home icon">  </i>发文</a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 2) ? 'active' : ''}" th:href="@{/admin/todolist}"> <i class="ui tasks  icon">  </i>TODO</a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 3) ? 'active' : ''}" th:href="@{/admin/chart}"><i class="ui chart bar icon">  </i> 图表 </a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 5) ? 'active' : ''}" th:href="@{/admin/tags}"><i class="ui compass icon">  </i> 机器人</a>
            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 4) ? 'active' : ''}" th:href="@{/admin/tags}"><i class="ui play  icon">  </i> 视频 </a>

            <a class="m-item m-mobile-hidden item"  th:classapend = "${(n == 6) ? 'active' : ''}" th:href="@{/}"><i class="ui pencil icon">  </i>主页展示</a>
            <div class="right m-mobile-hidden menu">
                <!--                    <div class="ui dropdown item">-->
                <!--                        <img class="ui avatar image" src="../../static/images/mio3.jpg" th:src="@{/images/mio3.jpg}">-->
                <!--                        长野原美绪-->
                <!--                        <i class="dropdown icon"></i>-->
                <!--                        <div class="menu">-->
                <!--                            <a href="#" class="item" th:href="@{/admin/user}">管理账号</a>-->
                <!--                            <a href="#" class="item" th:href="@{/admin/logout}">退出登录</a>-->
                <!--                        </div>-->
                <!--                    </div>-->
                <div class="ui dropdown item">
                    <img class="ui avatar image" src="../../static/images/mio3.jpg" th:src="@{${session.user.avatar}}" >

                    <a href="#" class="header" th:text="${session.user.nickname}"> </a>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item" th:href="@{/admin/user}">管理账号</a>
                        <a href="#" class="item" th:href="@{/admin/logout}">退出登录</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <a href="#" class="ui menu toggle m-mobile-show   button">
        展开
        <i class="sidebar  icon m-top-right "></i>
    </a>

</nav>


<br>
<br><br><br>


<div class="ui   container">

    <div class="ui two stackable grid">
        <div class="six wide column   "   id = "todolistcolumns">

<!--            用来存值啊-->
            <div class="ui segment">
                <div class="ui container" style="height: 30px">
                    <h2 class="ui middle aligned header">todo</h2>
                </div>
                <div class="ui action fluid input">
                    <input type="text" id="Todotitleinput" placeholder="添加任务...">
                    <button class="ui icon button" id="addTodoButton">
                        <i class="plus icon"></i>
                    </button>
                </div>
            </div>
                <div class="ui m-padded-mini segment " th:fragment="todolists" id ="alltodolist" >


                <div class="ui divided relaxed list"  >
                    <div class="ui  m-padded-tb-small m-margin-tb-small segment" th:each="todo, stat : ${todolist}"
                         th:if="${todo.finished} == false "  >
                        <input type="hidden"   id="hiddencurrentTodoitemid" th:value="${currentTodoitem.id}" th:if="${currentTodoitem}!=null" />

                        <!-- 使用input type="text"来创建一个输入框，并绑定todo对象的title属性 -->
                        <div class="ui labeled floating animated m-padded-tb-mini  fluid input" >
                            <input type="hidden" th:value="${todo.id}"   />
                            <div class="ui mini button" onclick="editTodo(this)" style="width:2em" th:attr="data-content=${todo.content}, data-title=${todo.title}, data-todo-id=${todo.id}, data-finished =  ${todo.finished}" >
                                改
                            </div>
                            <input type="text" th:value="${todo.title}"     class="ui fluid input"   readonly   />


                            <div class="ui blue icon todos-complete-button   button" th:attr=" data-todo-finish-id=${todo.id}">

                                <i class="  check circle  icon"></i> 完成
                            </div>
                            <button class="ui red icon button" onclick="deleteTodo(this)" th:attr="data-id=${todo.id}"  th:id="'completeIcon' + ${todo.id}" >
                                <i class="trash alternate outline icon"></i>
                            </button>
                        </div>

                    </div>

                </div>


                <div class="ui fluid m-padded-mini selection dropdown item" id="completed-dropdown">
                    <i class="dropdown icon"></i>  已完成
                    <div class=" finishedtodolist menu" style="width:100%">
                        <div class="container" style="width:100%">
                            <div class="ui  m-padded-tb-small m-margin-tb-small segment" th:each="todo, stat : ${todolist}"
                                 th:if="${todo.finished} == true " >


                                <!-- 使用input type="text"来创建一个输入框，并绑定todo对象的title属性 -->
                                <div class="ui labeled floating animated m-padded-tb-mini  fluid input" >
                                    <input type="hidden" th:value="${todo.id}"   />
                                    <div class="ui mini button" onclick="editTodo(this)" style="width:2em" th:attr="data-content=${todo.content}, data-title=${todo.title}, data-todo-id=${todo.id}, data-finished =  ${todo.finished}" >
                                      改
                                    </div>
                                    <input type="text" th:value="${todo.title}"     class="ui fluid input"   style="  text-decoration: line-through;"   readonly   />


                                    <div class="ui basic blue todos-complete-button button" th:attr="data-todo-finish-id=${todo.id}">
                                        <!--                                <i class=" undo icon"></i> -->
                                        取消
                                    </div>
                                    <button class="ui red icon button" onclick="deleteTodo(this)" th:attr="data-id=${todo.id}"  th:id="'completeIcon' + ${todo.id}" >
                                        <i class="trash alternate outline icon"></i>
                                    </button>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>



            </div>





        </div>
        <div class="ten wide column">
            <!--  -->
<!--         还是别 position fix 位置了 手机端网页不好处理 -->

                <form id="todolist-form" action="/admin/todolist" method="post" class="ui form" >
                    <div class="ui segment" style="min-height: 300px;">
                        <div class="ui segment">

                            <input type="hidden"   id="currenttodoid" th:value="${currentTodoitem.id}" th:if="${currentTodoitem}!=null" />
                            <div class="ui fluid stackable grid">
                                <div class="one wide column ">
                                    <input type="checkbox" name="todo" class="ui blue big checkbox"   id="currenttodofinished" >
                                </div>
                                <div class="fifteen wide columns" style="width: 92%">
                                    <input type="text"    placeholder="输入标题...不要空选" id="currenttodotitle" class="ui fluid   input" />
                                </div>

                            </div>
                       </div>
                        <div class="ui input fluid">
                            <!-- 去掉了 th:text 属性，直接使用 value 属性 -->
                            <textarea id="currenttodocontent" style="height: 50vh; width: 100%; box-sizing: border-box;" placeholder="todo内容，...ctrl+shift+s 可以快速保存哦"></textarea>
                        </div>
                        <div class="item">
                            <button type="submit" class="ui blue button" style="width: 100px">保存</button>
                        </div>
                    </div>
                    <div id="success-message" class="ui message success">
                        保存成功！
                    </div>
                </form>

        </div>
    </div>
</div>
<!--中间内容-->



<br>
<br>
<br>
<br>
<br>
<br>


<footer th:replace="~{admin/_fragments ::footer}" class="ui    attached segment m-padded-tb-mini m-shadow-big-up  ">

    <br>
    <br>
    <br>
    <div class="ui center aligned container">
        <div class="ui   divided stackable grid">

            <div class="three wide column">

                <div class="middle aligned">

                    <img src="../../../static/images/mio1.png"
                         class="ui middle aligned round image" alt="" style="width: 150px" th:src="@{/images/mio1.png}">
                </div>


            </div>
            <div class="three wide column ">
                <h4 class ="ui   header" >最新文章</h4>
                <div class="ui red  link list">
                    <div id="newblog-container">
                        <div class="ui   link list" th:fragment="newblogList">
                            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item black m-text-thin" th:each="blog : ${newblogs}" th:text="${blog.title}">用户故事（User Story）</a>
                            <!--/*-->
                            <!--*/-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class ="ui   header">练习方式</h4>
                <div class="ui black  link list">
                    <a href="#" class="item">yonghuname@github.com</a>
                    <a href="#" class="item">等待填充</a>
                    <a href="#" class="item">等待填充</a>
                </div>
            </div>

            <div class="seven wide column">

                <h4 class ="ui   header">网页介绍</h4>

                <p  class="m-text-thin m-text-spaced m-opacity-mini ">学而不思则罔，思而不学则怠。</p>

            </div>
        </div>

        <!--111111111111111111111111111111-->

        <div class="ui   section divider m-padded-tb-">
        </div> <p class="m-text-thin m-text-spaced m-opacity-mini">All rights reserved  </p>
    </div>
</footer>



<script>

    $(document).ready(function() {
        $('.menu.toggle').click(function() {
            $('.m-item').toggleClass('m-mobile-hidden');
        });
    });
    $('.ui.dropdown')
        .dropdown({
            // you can use any ui transition
            // transition: 'drop',
            on:  'hover'
        })

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
        on : 'hover'
    });

    $('.ui.fluid.m-padded-mini.dropdown').dropdown({
        on : 'hover'
    });

    //消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });
    // $('.ui.form').form({
    //     // 表单验证规则
    //     fields: {
    //         // 表单字段验证规则
    //     },
    //     // 表单提交成功后的回调函数
    //     on: 'submit',
    //     success: function(response) {
    //         // 显示自定义的提示信息
    //         $('.ui.success.message').transition('fade in').removeClass('hidden');
    //
    //         // 3秒后隐藏提示信息
    //         setTimeout(function() {
    //             $('.ui.success.message').transition('fade out').addClass('hidden');
    //         }, 3000); // 3000毫秒后隐藏提示信息
    //     }
    // });
// 上面几乎是jquery代码下面是常规的js

</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- JavaScript 代码 -->
<script>

    // 下拉的操控
    document.addEventListener('DOMContentLoaded', function() {
        // 获取菜单的父级元素
        var menuParent = document.getElementById('todolistcolumns'); // 根据需要替换为实际的父级元素ID

        // 添加点击事件监听器到父级元素
        menuParent.addEventListener('click', function(event) {
            var target = event.target;

            // 检查点击的元素是否为已完成下拉菜单的触发按钮
            if (target.id==='completed-dropdown') {
                // 获取已完成下拉菜单的元素
                var completedDropdown = document.getElementById('completed-dropdown');

                // 获取菜单元素
                var menu = completedDropdown.querySelector('.menu');

                // 切换菜单的可见性
                if (!menu.classList.contains('transition')) {
                    menu.classList.add('transition');
                }

                if (menu.classList.contains('visible')) {
                    // 如果菜单可见，移除 visible 类并添加 hidden 类
                    menu.classList.remove('visible');
                    menu.classList.add('hidden');
                } else {
                    // 如果菜单隐藏，移除 hidden 类并添加 visible 类
                    menu.classList.remove('hidden');
                    menu.classList.add('visible');
                }
            }
        });
    });
    document.addEventListener('DOMContentLoaded', function() {
        // 检查 currentTodoitem 是否为 null 或者缺少标题和内容


        var checkbox = document.getElementById('currenttodofinished');

        // 监听复选框的 change 事件
        // checkbox.addEventListener('change', function () {
        //     // 获取复选框的选中状态
        //     var isChecked = this.checked;
        //
        //     alert(isChecked); // true 或 false
        // });
    });


    // 获取输入框和按钮元素
    var todoTitleInput = document.getElementById('Todotitleinput');
    var addTodoButton = document.getElementById('addTodoButton');
    var currentTodoitem
    // 为添加按钮添加点击事件监听器
    addTodoButton.addEventListener('click', function() {
        // 获取输入框的值
        var todoTitle = todoTitleInput.value.trim();

        // 验证输入是否为空
        if (todoTitle === '') {
            alert('请输入待办事项的标题');
            return;
        }

        // 构建待办事项对象
        var newTodo = {
            title: todoTitle,
            finished:false

        };

        // 使用 Axios 发送 POST 请求到后端
        axios.post('todolist/add', newTodo)
            .then(function(response) {

                todoTitleInput.value = '';
                currentTodoitem = newTodo;

                var todoListContainer = document.getElementById('alltodolist');
                document.getElementById('currenttodotitle').value =   todoTitle

               var id = document.getElementById('hiddencurrentTodoitemid').value
                // alert(id)
                document.getElementById('currenttodoid').value= id
                // alert(    document.getElementById('currenttodoid').value)
                // 说明没有获得 为什么第一下没有 第一下没有正确加载
                document.getElementById('currenttodofinished').checked =   false
                document.getElementById('currenttodocontent').value =  ""
                todoListContainer.innerHTML = response.data;
                // var todoListContainer = document.get('todolistcolumns');


            })
            .catch(function(error) {
                // 请求失败后的回调函数
                alert('待办事项添加失败');
                alert(error)
                console.error('Error:', error);
            });

    });
    todoTitleInput.addEventListener('keypress', function(event) {
        // 检查是否按下了回车键（KeyCode: 13）
        if (event.keyCode === 13) {
            // 阻止默认的回车键行为（例如提交表单）
            // event.preventDefault();

            // 这里调用点击按钮时的方法
            addTodoButton.click();
        }
    });
    // 在页面加载完毕后绑定事件监听器
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有完成和取消按钮的父容器
        var todoListContainer = document.getElementById('alltodolist');

        // 添加点击事件监听器到父容器，通过事件委托的方式处理点击事件
        todoListContainer.addEventListener('click', function(event) {
            var target = event.target;

            // 检查点击的元素是否为完成按钮
            if (target.classList.contains('todos-complete-button')) {
                // 获取待办事项的ID
                var todoId = target.getAttribute('data-todo-finish-id');

                axios.put('/admin/todolist', { id: todoId })
                    .then(function(response) {
                        // 更新成功后的操作

                        todoListContainer.innerHTML = response.data;

                    })
                    .catch(function(error) {
                        // 处理更新失败的情况
                        console.error('Error:', error);
                    });
            } else if (target.classList.contains('todos-cancel-button')) {
                // 处理取消按钮的点击事件
                // 这部分的代码与完成按钮类似，根据需要进行相应的处理
            }
        });
    });




    document.getElementById('todolist-form').onsubmit = function(event) {
        event.preventDefault(); // 阻止表单的默认提交行为

        // 获取表单数据
        var content = document.getElementById('currenttodocontent').value;
        var finished = document.getElementById('currenttodofinished').checked;
        var title = document.getElementById('currenttodotitle').value
        var id =     document.getElementById('currenttodoid').value
        // 构建待办事项对象
        var newTodo = {
            id:id,
            title: title, // 假设标题是固定的
            content: content,
            finished: finished
        };
        if(!id){
            alert("请重新点击对应项")
        }else{
        // 使用 Axios 发送 POST 请求到后端 更新
        axios.post('/admin/todolist', newTodo)

            .then(function(response) {

                currentTodoitem = newTodo;
                var todoListContainer = document.getElementById('alltodolist');
                todoListContainer.innerHTML = response.data;
                alert("保存成功")

            })
            .catch(function(error) {
                // 请求失败后的回调函数
                alert("更新失败");
                console.error('Error:', error);
            });
        }
    };


    document.getElementById('todolist-form').addEventListener('keydown', function(event) {
        // 检查是否同时按下了 Ctrl 和 Shift，并且按下的键是 "S"
        if (event.ctrlKey && event.shiftKey && event.key === 'S') {
            event.preventDefault(); // 阻止默认的按键行为

            // 调用表单的 onsubmit 事件处理器
            var form = document.getElementById('todolist-form');
            form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: false }));
        }
    });
    function deleteTodo(button) {


        // 获取最近的兄弟隐藏 input 元素
        var todoid = button.getAttribute('data-id');
       var currenttodoid = document.getElementById('currenttodoid').value

        if (todoid != currenttodoid)
            var res = confirm("确定要删除这个待办事项吗？");
        else {
            alert("不能删除正在编辑的todo,请先保存,或者切换到另外的todo上");
            res = false;
        }
        if(res){

            // 发送 AJAX 请求到后端以删除待办事项
            axios.delete('/admin/todolist',
                {
                    params:{
                        todoid:todoid
                    }
                }
            )
                .then(function(response) {
                    // 删除成功后的回调函数

                    // 从 DOM 中移除待办事项元素
                    var todoItem = button.closest('div.ui.segment'); // 获取整个待办事项元素
                    todoItem.remove();
                })
                .catch(function(error) {
                    // 请求失败后的回调函数
                    alert("删除失败");

                    console.error('Error:', error);
                });
        }
    }




    function editTodo(button) {


        //点击编辑按钮进入表单，调整数据，这是先复制数据到表单
        var todoId = button.getAttribute('data-todo-id');
        var todoContent = button.getAttribute('data-content');
        var todoFinished = button.getAttribute('data-finished')  ;
        var todoTitle = button.getAttribute("data-title");
        // todo 复选框问题 
        document.getElementById('currenttodotitle').value =   todoTitle
        document.getElementById('currenttodoid').value =   todoId
        document.getElementById('currenttodocontent').value =  todoContent

        // alert(todoFinished)
        // alert( document.getElementById('currenttodofinished').checked)
        document.getElementById('currenttodofinished').checked = false
        // (我觉得真的一直这个位置的bug查不出来 ,设置上面为todoFinished 一直默认为true
        // alert( document.getElementById('currenttodofinished').checked)
        // var newTodo = {
        //     id:todoId,
        //     title: todoTitle, // 假设标题是固定的
        //     content: todoContent,
        //     finished: todoFinished
        // };





    }
    document.addEventListener('DOMContentLoaded', function() {
        $('.ui.dropdown').dropdown();
    });



</script>
</body>
</html>